<template>
	<view>
		<view class="flex_around rank_top">
			<view class="rank_top_item" :class="{'rank_item_ac':item.id==current}" v-for="item in cate" @click="changeRank(item.id)">{{item.name}}</view>
		</view>
		<view class="rank_list" v-if="list&&list.length>0">
			<view class="flex_box rank_item" v-for="(item,index) in list">
				<view class="rank_left">
					<image v-if="item.ranking==1" src="https://img.jinghushi.com/images/9/2025/04/mv7S7G9fN77hT579vg7v8jH38G77zq.png"></image>
					<image v-if="item.ranking==2" src="https://img.jinghushi.com/images/9/2025/04/iaRzAzfDBdA17SXdrri10s1Slz4BzH.png"></image>
					<image v-if="item.ranking==3" src="https://img.jinghushi.com/images/9/2025/04/r8dzU9sszWGLUWdu8dUsgWDwsD0SLZ.png"></image>
					<view class="rank_num" :class="{'rank_num_red':item.ranking==1,'rank_num_orange':item.ranking==2,'rank_num_yellow':item.ranking==3}">Top{{item.ranking}}</view>
				</view>
				<view class="rank_right">
					<view class="rank_tit">{{item.name}}</view>
					<view>业绩：{{item.money}}元</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif" ></image>
				<view v-if="ismore">到底了~</view>
			</view>
		</view>
		<view class="flex_box rank_item rank_self" v-if="info.ranking">
			<view class="rank_left">
				<image v-if="info.ranking==1" src="https://img.jinghushi.com/images/9/2025/04/mv7S7G9fN77hT579vg7v8jH38G77zq.png"></image>
				<image v-if="info.ranking==2" src="https://img.jinghushi.com/images/9/2025/04/iaRzAzfDBdA17SXdrri10s1Slz4BzH.png"></image>
				<image v-if="info.ranking==3" src="https://img.jinghushi.com/images/9/2025/04/r8dzU9sszWGLUWdu8dUsgWDwsD0SLZ.png"></image>
				<view class="rank_num" :class="{'rank_num_red':info.ranking==1,'rank_num_orange':info.ranking==2,'rank_num_yellow':info.ranking==3}">Top{{info.ranking}}</view>
			</view>
			<view class="rank_right">
				<view class="rank_tit">{{info.name}}</view>
				<view>业绩：{{info.money}}元</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				cate: [
					{id:0,name:'战区排名'},
					{id:1,name:'省排名'},
					{id:2,name:'市排名'},
					{id:3,name:'区/县排名'},
				],
				page: 0,
				isloading: false,
				ismore: false,
				list: [],
				info: []
			};
		},
		onLoad(){
			this.getList();
		},
		methods: {
			getList(){
				this.page++;
				this.isloading = true;
				this.$axios('RegionalService/incomeRanking', "POST", 'regional',{
					type: this.current
				}).then(res => {
					this.isloading=false;
					if (res.data.code == 200) {
						this.info = res.data.data.self;
						this.list = [...this.list,...res.data.data.list];
						this.ismore = res.data.data.list.length<=0;
					}
				})
			},
			changeRank(id){
				if(id==this.current) return;
				this.current = id;
				this.page = 0;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #FBF8FE;
	padding-bottom: 160rpx;
}
.rank_top{
	position: fixed;
	width: 100%;
	font-size: 30rpx;
	top: 0;
	background: #FBF8FE;
	.rank_top_item{
		color: #666;
		padding-bottom: 16rpx;
	}
	.rank_item_ac{
		color: $bg-color;
		font-weight: bold;
	}
}
.rank_list{
	padding: 20rpx;
	border: 2rpx solid #eee;
	margin: 0 20rpx;
	margin-top: 60rpx;
	border-radius: 8rpx;
}
.rank_item{
	margin-bottom: 20rpx;
	box-shadow: 0px 12rpx 16rpx 0px rgba(0, 0, 0, 0.1);
	padding: 20rpx 0;
	image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 6rpx;
	}
	.rank_left{
		width: 100rpx;
		margin-right: 20rpx;
		text-align: center;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.rank_num{
		color: #888;
	}
	.rank_tit{
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.rank_num_red{
		color: #f10f0f;
	}
	.rank_num_orange{
		color: #e29405;
	}
	.rank_num_yellow{
		color: #f7d24e;
	}
}

.rank_self{
	width: 100%;
	position: fixed;
	bottom: 0;
	background: #FBF8FE;
	padding: 20rpx 40rpx;
	border-top: 4rpx solid #eee;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}
</style>
